<template>
  <div>
      <vxe-grid
          id="ColumnList"
          ref="vxeTable"
          v-bind="gridOptions"
          :pagerConfig="false"
        >
        <template #action="{ row }">
          <template>
            <a @click="handleEdit(row)" >编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.username)">
              <a>删除</a>
            </a-popconfirm>
          </template>
        </template>
      </vxe-grid>
      <ColumnModal ref="modalForm" @ok="modalFormOk" :table="table"/>
  </div>
</template>

<script>
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import ColumnModal from './ColumnModal'
export default {
  name: 'ColumnList',
  mixins: [VxeTableListMixin],
  components: { ColumnModal },
  props: {
    table: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      columns: [
        { title: '列名称', field: 'columnName', sorter: true },
        { title: '类型', field: 'columnType' },
        { title: '长度', field: 'columnSize' },
        { title: '是否主键', field: 'isprimaryKey', formatter: 'dictText' },
        { title: '是否可为空', field: 'isnullAble', formatter: 'dictText' },
        { title: '操作', slots: { default: 'action' }, width: 170 }
      ],
      url: {
        list: '/dbconsole/column/list/'
      },
      toolbarConfig: {
        import: false
      },
      proxyConfig: {
        autoLoad: false// 初始化不自动请求数据
      }
    }
  },
  watch: {
    table: {
      handler(newVal) {
        if (newVal && newVal.type === 'table') {
          this.url.list = '/dbconsole/column/list/' + newVal.data.dbInfoId + '/' + newVal.data.tableName
          this.loadData()
        } else {
          this.$nextTick(() => {
            this.$refs.vxeTable.reloadData([])
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    loadData(type) { // type类型为 reload、query 参考vxe-table文档setup.toolbar.buttons，code参数
      if (this.table.type !== 'table') {
        return this.$message.warning('请选择表')
      }
      this.$nextTick(() => {
        this.$refs.vxeTable.commitProxy(type || 'query')
      })
    },
    addBefore() {
      if (this.table.type !== 'table') {
        return '请选择表'
      }
      return false
    }
  }
}
</script>

<style>

</style>
